<template>
  <div class="center">
    <div class="header">
      <div class="header-info">
        <div>当前账号</div>
        <div class="prop-value">{{ userInfo.username }}</div>
      </div>

      <div class="picture" >
        <img src="../../assets/images/download.png" alt="" />
      </div>

      <div style="text-align: left;" class="header-info">
        <div>剩余积分</div>
        <div class="prop-value">{{ userInfo.point || 0 }}</div>
      </div>
    </div>
    <div class="content">
      <div style="line-height: 0.266667rem;flex:1">
        <img class="content-p1" src="../../assets/images/phone1.svg" />
        <span style="font-weight: bold;">相关调度:</span>
      </div>
      <div class="solid"></div>
      <div style="font-size: 0.35rem;letter-spacing:2px;flex:2">{{ schedulePhone | iphone }}</div>
      <div
        class="text-center"
        style="flex:0.8;position: relative;"
        v-clipboard:copy="schedulePhone"
        v-clipboard:success="onCopy"
        v-clipboard:error="onError"
      >
        <img class="content-p4" src="../../assets/images/phone4.svg" />
        <div >复制号码</div>
      </div>
      <!-- <a class="text-center" :href="`tel: ${schedule.phone}`">
        <img class="content-p4" src="../../assets/images/phone4.svg" />
        <div>拨打电话</div>
      </a> -->
    </div>
   
    <img class="backImg" src="../../assets/images/center.png" alt="" />
     <div class="logout">
      <van-button
        class="logout-btn"
        plain
        type="primary"
        size="small"
        @click="handleLogout"
        >退出登录</van-button
      >
    </div>
    <div @click="show = true" class="edit-password">修改密码</div>

    <van-dialog v-model="show" :show-confirm-button="false">
      <div class="popup">
        <van-icon name="close" class="close" @click="show = false"/>
        <van-form @submit="onSubmit">
          <div style="margin-top: 0.2rem">密码修改</div>
          <div class="field">
            <label class="label">当前账号：</label>
            <span>{{ userInfo.username }}</span>
          </div>
          <van-field
            class="styleinput"
            v-model="form.before"
            label-class="popup-value"
            label="原登录密码："
           
            type="password"
            :rules="[
              { validator, message: '原登录密码不正确' },
              { required: true, message: '请填写原登录密码' },
            ]"
          />
          <van-field
            class="styleinput"
            v-model="form.password"
            label-class="popup-value"
            label="新登录密码："
            autocomplete="new-password"
            type="password"
            
            :rules="[
              { required: true, message: '请填写新登录密码' },
              {
                validator: checkedPassword,
                message: '密码格式错误，请输入6-20位字母数字组合！',
              },
            ]"
          />
          <van-field
            class="styleinput"
            v-model="form.comfirmPassword"
            label-class="popup-value"
            label="确认新密码："
            type="password"
          
            :rules="[
              { required: true, message: '请填写新登录密码' },
              { validator: checkedComfirm, message: '密码不一致，请重新填写' },
            ]"
          />
          <div class="wrap-btn">
            <van-button
              type="primary"
              class="btn btns"
              round
              block
              @click="handleCancel"
              >取消</van-button
            >
            <van-button
              class="btn"
              round
              block
              type="primary"
              native-type="submit"
              >确定</van-button
            >
          </div>
        </van-form>
      </div>
    </van-dialog>

    <TabBar />
  </div>
</template>

<script>
// import { mapState } from "vuex";
import { mapActions } from "vuex";
import { UserEditPassword, GetUserView } from "@/api/user";
import TabBar from "../../components/TabBar";
import { Toast, Dialog } from "vant";

export default {
  components: {
    TabBar,
  },
  data() {
    return {
      show: false,
      form: {
        before: "",
        password: "",
        comfirmPassword: "",
        id: "",
        curPassword: "",
      },
      schedule: {
        name: "",
        phone: "",
      },
      userInfo: {},
      schedulePhone: "",
    };
  },
  //   computed: {
  //     ...mapState("user", ["userInfo"]),
  //   },
  methods: {
    ...mapActions("user", ["Logout"]),
    async initInfo() {
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      // console.log('info', info)
      if (this.userInfo) {
        let Uresp = await GetUserView(this.userInfo.uid);
        if (Uresp.status === 1) {
          // console.log("Uresp", Uresp);
          this.userInfo.point = Uresp.data.point;
          // this.userInfo.schedulePhone = Uresp.data.schedulePhone;
          this.schedulePhone = Uresp.data.schedulePhone;
        }
        // console.log(this.userInfo)
      } else {
        this.$router.push("/login");
      }
    },
    validator(val) {
      // console.log("validator", val, this.userInfo.password);
      this.curPassword = this.userInfo.password;
      const { password } = this.userInfo;
      if (password === val) {
        return true;
      } else {
        return false;
      }
    },
    checkedComfirm(val) {
      const { password } = this.form;
      // console.log("userInfo", this.userInfo);
      if (password === val) {
        return true;
      } else {
        return false;
      }
    },
    checkedPassword(val) {
      return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z!@#$%^&*()]{6,20}$/g.test(
        val
      );

      // if (password === val) {
      //   return true;
      // } else {
      //   return false;
      // }
    },
    handleCancel() {
      this.show = false;
      this.form = {
        before: "",
        password: "",
        comfirmPassword: "",
        id: "",
        curPassword: "",
      };
    },
    async onSubmit() {
      let info = this.form;
      info.id = this.userInfo.uid;
      info.curPassword = this.userInfo.password;
      console.log("info", info);
      this.$nextTick(async () => {
        let resp = await UserEditPassword(info);
        console.log(resp);
        if (resp.status === 1) {
          Toast.success("修改成功");
          this.show = false;
          this.form = {
            before: "",
            password: "",
            comfirmPassword: "",
            id: "",
            curPassword: "",
          };
        }
      });
    },
    handleLogout() {
      Dialog.confirm({
        title: "提示",
        message: "确定退出登录么？",
      })
        .then(() => {
          // on confirm
          this.Logout();
          this.$router.push("/home");
        })
        .catch(() => {
          // on cancel
        });
    },
    onCopy: function (e) {
      console.log("You just copied: " + e.text);
      Toast.success("复制成功");
    },
    onError: function (e) {
      Toast.success("复制失败");
      console.log("Failed to copy texts");
    },
  },
  created() {
    this.initInfo();
  },
  mounted() {},
  filters:{
      iphone(el){
      
        let a= el.slice(0,3)
        let b = el.slice(3,8)
        let c = el.slice(8,11)
        return `${a}-${b}-${c}`
      }
  }
};
</script>

<style lang="less">
.center {
  position: relative;
  text-align: center;
  .header {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    // height: 13.5625rem;
    height: 3rem;
    background: url("../../assets/images/bg1.png") no-repeat;
    background-size: 100% 100%;

    .header-info {
      text-align: right;
      font-size: 0.2rem;
      .prop-value {
        font-size: 0.3rem;
      }
    }
    .picture {
      position: relative;
      width: 0.96rem;
      height: 0.96rem;
      margin: 0 0.373333rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .picture::before {
      content: "";
      position: absolute;
      top: 50%;
      left: -0.186667rem;
      width: 0.013333rem;
      height: 0.266667rem;
      background: #fff;
      transform: translateY(-50%);
    }
    .picture::after {
      content: "";
      position: absolute;
      top: 50%;
      right: -0.186667rem;
      width: 0.013333rem;
      height: 0.266667rem;
      background: #fff;
      transform: translateY(-50%);
    }
  }
  .content {
    display: flex;
    position: relative;
    width: 80%;
    height: 48px;
    margin: 15px auto 0;
    
    justify-content: space-between;
    align-items: center;
    color: white;
    margin-bottom: 20px;
    border-radius: 5px;
    background-image: linear-gradient(140deg, #09bcde 0, #1442f3 100%);
    box-shadow: 0 5px 15px 0px #09bcde;
    
    font-size: 8px;
    .content-p1 {
      width: 0.24rem;
      height: 0.24rem;
      vertical-align: top;
      margin-right: 0.066667rem;
    }
    .content-p4 {
      width: 0.36rem;
      height: 0.36rem;
      vertical-align: top;
      margin-left: 0.066667rem;
    }
    a {
      color: #fff;
    }
    .solid{
      width: 1px;
      height: 75%;
      background-color: #FFFFFF;
      transform: rotate(25deg);
      opacity: .5;
    }
    .text-center::before {
      content: "";
      position: absolute;
      top: 50%;
     left: -1px;
      width: 1px;
      height: 0.5rem;
      opacity: 0.5;
      background: #fff;
      transform: translateY(-50%);
    }
  }
  .edit-password {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    color: #fff;
    font-size: 0.25rem;
  }
  .van-dialog {
    border-radius: 4px;
  }
  .popup {
    position: relative;
    width: 100%;
    font-size: 0.313333rem;
    .close{
      position: absolute;
      top: 0  px;
      right: 15px;
      color:silver;
      font-size: 25px;
    }
    .field {
      padding: 0.18519rem 0.2963rem;
      text-align: left;
      .label {
        width: 6.2em;
        margin-right: 0.22222rem;
        color: #646566;
      }
    }
    .popup-value {
      font-size: 0.3rem;
    }
    .wrap-btn {
      display: flex;
      flex: nowrap;
      justify-content: center;

      .btn {
        display: block;
        width: 40%;
        height: 41px;
        line-height: 41px;
        background: #48a1fa;
        border-radius: 4px;
        margin: 20px 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border: none;
      }
      .btns {
        background: #e87171;
        color: #fff;
        border-radius: 4px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
  .logout {
   
    text-align: center;
    .logout-btn {
      padding: 0 0.3rem;
      border-radius: 1rem;
    }
  }
  .backImg {
    width: 90%;
    margin-top: 1rem;
  }
}

::v-deep {
  .van-cell .van-field {
    font-size: 16px;
  }
  .van-cell{
    position: static !important;
  }
  .van-field__body .van-field__control {
    background: red !important;
  }
  .van-popup--center {
    border-radius: 0.066667rem;
  }
 
}
</style>